<script setup>
    import { ref } from 'vue'
    // 数据，原来是写在data中的，此时的name、age、tel都不是响应式的数据
    let name = ref('张三1');
    let age = ref(19);

    //方法
    function changeName() {
        //this.name = 'zhang-san';
        name.value = 'zhang-san11';
        console.log(name);
    }

    function changeAge() {
        //this.age += 1;
        age.value += 1;
        console.log(age)
    }
</script>

<template>
	<div class="person">
		<h2>姓名: {{name}}</h2>
		<h2>年龄: {{age}}</h2>
		<button @click="changeName()">修改名字</button>
		<button @click="changeAge">修改年龄</button>
	</div>
</template>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }

    button {
        margin: 0 5px;
    }
</style>